<template>
  <div class="step">
    <el-steps direction="vertical">

      <el-step title="设置Excel表头字段">
        <template #description>
          <div class="step__description">
            <ul>
              <li>请根据你的需求，选择「人事档案」中的字段</li>
              <li>若无法满足需求，<el-button type="text" @click="handleJump">请新增字段</el-button></li>
              <li>表头字段设置后或修改后，将自动导出配置完成后的Excel文件</li>
            </ul>
            <div style="margin-top: 10px">
              <el-button type="primary" @click="handleOpenDialog">去设置表头字段</el-button>
              <div style="margin-top: 10px; font-size: 14px;">若已设置，可跳过此步</div>
            </div>
          </div>
        </template>
      </el-step>

      <el-step title="导入员工">
        <template #description>
          <ul>
            <li>导入前，请确保已设置表头字段</li>
            <li>若Excel表中某一字段未设置为Excel表头字段，该字段将不会导入</li>
            <li>确保设置的表头字段，在「人事档案」中已存在，如不存在请前往创建</li>
            <li>确保设置的表头字段名称与员工档案中的字段名称保持一致，否则将无法导入</li>
          </ul>

          <div class="file-upload-container">
            <el-upload class="upload-demo" accept=".xlsx,.xls" drag action="" :http-request="handleUpload">
              <svg-icon icon-class="excel-icon" class="file-selector__icon" />
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </div>
        </template>
      </el-step>

    </el-steps>
    <el-dialog
      title="Excel表头设置"
      :visible.sync="visible"
      :close-on-click-modal="false"
      @close="$emit('onCancel')"
    >
      <div class="excel-header-setting__container">
        <el-transfer
          v-model="selected"
          :data="selectOptionsFormatter"
          :titles="['待选择', '已选择']"
        >
          <template v-slot="{ option }">
            <span :title="option.label">{{ option.label }}</span>
          </template>
        </el-transfer>
      </div>
      <template #footer>

        <span>
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">{{ isEditing ? '修改' : '设置' }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { defaultSelected } from '../../EmployeesTable.vue'
export default {
  name: '',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    selectOptions: {
      type: Array,
      default: () => []
    },
    isEditing: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fields: [],
      isUnEnabledFiled: [
        'open_id',
        'introducer_id',
        'certificate',
        'certificate_list',
        'emergency_contact',
        'family_situation',
        'education_experience',
        'work_experience',
        'leader_id',
        'room_id',
        'quit_salary_status',
        'job_status',
        'identity'
      ],
      visible: false,
      backUp: []
    }
  },
  computed: {
    selected: {
      get() {
        return this.value
      },
      set(e) {
        this.$emit('input', e)
      }
    },
    selectOptionsFormatter() {
      return this.selectOptions
        .filter(item => !this.isUnEnabledFiled.includes(item.field) && item.type !== 'file')
        .map(item => {
          return {
            key: item.id,
            label: item.name,
            field: item.field,
            disabled: defaultSelected.includes(item.id)
          }
        })
    }
  },
  created() {
  },
  methods: {

    handleOpenDialog() {
      this.visible = true
    },

    handleUpload(e) {
      this.$emit('onUpload', e)
    },

    handleConfirm() {
      this.$emit('onSetting')
      this.visible = false
    },

    handleCancel() {
      this.visible = false
      this.$emit('onCancel')
    },

    handleJump() {
      this.$router.push({
        path: '/set/custom-fields'
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.step {
  &__description {
    height: 180px;
  }

  ul {
    padding: 0 0 0 10px;
    margin: 0;
    color: #333;
    font-size: 14px;
    li {
      margin-bottom: 5px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .file-upload-container {
    margin-top: 10px;
    width: 100%;
    background-color: #fff;

    .file-selector__icon {
      margin: 40px 0 16px 0;
      font-size: 50px;
    }

    .example-file {
      color: #1890ff;
      padding: 10px;
    }
  }

}

.excel-header-setting__container {
  display: flex;
  justify-content: center;
}

</style>

